<template>
  <div class="post-detail-page ">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/" class="">首页</a></li>
        <li class="breadcrumb-item">
          <a href="/column/5f3e86d62c56ee13bb83096b" class="">专栏首页</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
          {{ posts.title }}
        </li>
      </ol>
    </nav>
    <article class="mb-5 pb-3">
      <img
        v-if="posts.image"
        :src="posts.image.url"
        :alt="posts.title"
        class="rounded-lg img-fluid my-4"
      />
      <h2 class="mb-4">{{ posts.title }}</h2>
      <div
        class="user-profile-component border-top border-bottom py-3 mb-5 align-items-center row g-0"
      >
        <div class="col">
          <div class="user-profile-component">
            <div class="d-flex align-items-center">
              <img
                v-if="posts.author"
                :src="posts.author.avatar.url"
                alt="Maxime_Nienow"
                class="rounded-circle avatar img-thumbnail"
              />
              <div class="detail ml-2" v-if="posts.author">
                <h6 class="d-block mb-0">{{ posts.author.nickName }}</h6>
                <span class="text-truncate text-muted d-block">{{
                  posts.author.description
                }}</span>
              </div>
            </div>
          </div>
        </div>
        <span class="text-muted col text-right font-italic"
          >发表于：{{ posts.updatedAt }}</span
        >
      </div>
      <div v-html="posts.content"></div>
    </article>
  </div>
</template>
<script>
import { useRoute, useRouter } from 'vue-router';
import { onMounted, ref } from 'vue';
import { getPosts } from '@/api/post';
export default {
  name: 'PostsPage',
  setup() {
    const route = useRoute();
    const router = useRouter();
    console.log(router);
    const currentId = route.params.id;
    const posts = ref({});

    const getPostsData = async () => {
      const res = await getPosts(currentId);
      posts.value = res;
    };

    onMounted(() => {
      getPostsData();
    });

    return {
      posts,
    };
  },
};
</script>

<style lang="scss">
.post-detail-page {
  margin: 0 auto;
  width: 690px;
  .avatar {
    height: 50px;
    width: 50px;
  }
}
</style>
